<template>
	<view class="qun">
		<view class="name">
			联系客服
		</view>
		<view class="desc">
			请扫描下方二维码或保存图片联系客服
		</view>
		<view class="ewm">
			<image :src="src" mode="widthFix"></image>

		</view>
		<view @click="save" class="btns">
			保存二维码图片
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/32.png'
			}
		},
		methods: {
			save() {

				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.src,
					success: function() {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				});
				// #endif


				// #ifdef H5
				var oA = document.createElement("a"); // 创建一个a标签
				// 正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本 ,
				// a的download 谷歌浏览器必须同源才能强制下载，否则跳转到图片地址
				oA.download = this.src.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];; // 设置下载的文件名，默认是'下载'
				oA.href = this.src;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除

				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qun {
		width: 600rpx;
		background: #FFFCFA;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		opacity: 1;
		border: 1rpx solid #FFFFFF;
		padding-bottom: 41rpx;

		.name {
			margin-top: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			// line-height: 47rpx;
			text-align: center;
		}

		.desc {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 35rpx;
			margin: 20rpx 0 0 0;
			text-align: center;
		}

		.ewm {


			image {
				display: block;
				width: 340rpx;
				height: 340rpx;
				margin: 36rpx auto 43rpx;
			}
		}

		.btns {


			width: 244rpx;
			height: 64rpx;
			background: #3757FF;
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			color: #f6f4ff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 55rpx auto 0 auto;

		}

	}
</style>
